<template>
  <view>
    <!-- <view class="fix">
      <view class="topBox">
        <view class="topScreenBox">
          <view class="searchCell">
            <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719815210371515.png" class="searchimg">
            </image>
            <view class="scInp">
              <input type="text" v-model="searchContent" placeholder="请输入圈子名称" maxlength="10"
                placeholder-class="placname" @input="blurSearch" />
            </view>
          </view>
          <view class="scBtnBox">
            <view class="scSumBtn" @click="subSearch">搜索</view>
          </view>
        </view>
      </view>
      
    </view> -->
    <block v-if="navindex == 0">
      <view class="actconBoxList">
				<block v-if="teamlist.length">
					<block v-for="(item, index) in teamlist" :key="index">
						<ActivityCell :item="item"></ActivityCell>
					</block>					
				</block>
				<view v-else>
					<u-empty
						mode="list"
						width="64"
						height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"
						:show="true"
						iconSize="32"
						text="这里什么都没有..."
					></u-empty>
				</view>
      </view>
    </block>
    <block v-if="navindex == 1">
      <view class="cirlistbox" style="margin-top: 50rpx;"> 
				<block v-if="teamlist.length">
					<view class="cirlist" v-for="(item, index) in teamlist" :key="index"
					        :style="'background-image: url(' + (item.Logo?item.Logo:'') + ');background-size: cover;background-repeat:no-repeat;'" @click.stop="nav_to('/pages/together/cirDetail?id='+item.ID)">
									<view class="teamBox" v-if="item.IsTeamAdmin==1">
										我是圈主
									</view>
					        <view class="cirinfobox">
					          <image class="hdimg" :src="item.Logo?item.Logo:''" mode="aspectFill"></image>
					          <view class="cirinfo">
					            <view class="cirname">{{ item.TeamName?$util.entitiesToUtf16(item.TeamName):'' }}</view>
					            <view class="cirrem hiddenText">{{ item.Tips? $util.entitiesToUtf16(item.Tips):'' }}</view>
					          </view>
					          <view class="cirjoin" v-if="item.IsJoin == 0">
					            <image class="joinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
					            </image>
					            <view class="jointext" @click.stop="JoinTeam(item.ID,index)">加入</view>
					          </view>
					          <!-- <view class="cirquit" v-else @click.stop="quitTeam(item,index)">
					            <view class="jointext">退出</view>
					          </view> -->
					        </view>
					        <view class="databox">
					          <view class="datatltie">
					            <view class="datanum">{{ item.HotValue }}</view>
					            <view class="datatext">人气值</view>
					          </view>
					          <view class="datatltie">
					            <view class="datanum">{{ item.BrowserNum }}</view>
					            <view class="datatext">浏览</view>
					          </view>
					          <view class="datatltie">
					            <view class="datanum">{{ item.MemberNum }}</view>
					            <view class="datatext">成员</view>
					          </view>
					        </view>
					
					        <view class="blackshadow"></view>
					</view>
				</block>
        
				<view v-else>
					<u-empty
						mode="list"
						width="64"
						height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"
						:show="true"
						iconSize="32"
						text="这里什么都没有..."
					></u-empty>
				</view>
      </view>
      <view style="height: 150rpx;"></view>
			<view class="btn_save" @click="goCiradd">
				<view class="save_btn">
					创建圈子
				</view>
			</view>
			
    </block>

  </view>
</template>

<script>
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
  components: {
    ActivityCell
  },
  data() {
    return {
      searchContent:'',
      teamlist: [],
      navlist: ['活动', '圈子'],
      navindex: 1,
      PageIndex: 1,
      PageSize: 10,
      longitude: null,
      latitude: null,
      isMore:false,
      user:{},
      huiNum:1,//加入圈子所需积分
			myCirList:[]
    };
  },
  async onLoad() {
		
    await this.getCity();
    this.navswitch(this.navindex)
    // this.getteam()
    this.user = uni.getStorageSync("user");
  },
	async onShow() {
		this.PageIndex = 1
		await this.getUserInfo()
		await this.getMycirInfo()
		this.getteam()
	},
  //下拉刷新
  // onPullDownRefresh(){
  //   this.PageIndex = 1
  //   this.teamlist  = []
  //   if(this.navindex == 0){
  //     this.getActList()
  //   }else{
  //       this.getteam()
  //   }
  //   uni.stopPullDownRefresh()
  // },
	
  // 触底事件
  onReachBottom() {
    if(this.isMore){
      if(this.navindex == 0){
        this.PageIndex++
        this.getActList()
      }else{
          this.PageIndex++
          this.getteam()
      }
    }
  },
  methods: {
		async getMycirInfo() {
			let res = await this.$api.post('Team/MyCreateTeam');
			if (res.code == 0) {
				this.myCirList = res.data || [];
			}
		},
		async getUserInfo() {
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', {
				ID: u.UserID,
			});
		
			this.user = res.data;
			uni.setStorageSync('user', this.user);
		
			this.$store.commit('setUser', this.user);
		
		},
		goCiradd() {
			if (this.user.IsAuth != 1) {
				this.nav_to('/pages/start/start2');
			} else {
				if (this.myCirList.length >= 3) {
					this.$pv.msg('您最多只能创建3个圈子');
				} else {
					this.nav_to('/pages/together/cir_add?type=my');
				}
			}
		},
    // 获取加入圈子需要多少积分
    async getJoinNum(){
      let res = await this.$api.post("Common/GetServerPrice", {
        Item:'加入圈子'
      })
      if (res.code == 0) {
        this.huiNum = res.data.Score || 0
      }
    },
    // 点击搜索
    subSearch() {
      if(this.navindex == 0){
        this.PageIndex == 1
        this.getActList()
      }else{
        this.PageIndex == 1  
        this.getteam()
      }
    },
    //空白搜索
    blurSearch() {
      
      if (this.searchContent == '') {
        this.PageIndex == 1
        if(this.navindex == 0){
        this.getActList()
        }else{ 
          this.getteam()
        }
      }

    },
    //退出圈子
    quitTeam(item,index){
      let _this = this;
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
        return
      }
      if (item.IsTeamAdmin == 1) {
        _this.$pv.msg("圈主无法退出");
        return
      }
      uni.showModal({
          title: "温馨提示",
          content: "您确定要退出该圈子吗？",
          confirmText: "确定",
          success: async function (res) {
            if (res.confirm) {
              let res1 = await _this.$api.post("Team/Quit", {
                TeamID: item.ID
              })
              if (res1.data) {
                _this.$pv.msg("退出成功");
                _this.teamlist[index].IsJoin = 0
              } else {
                _this.$pv.msg(res1.message);
              }
            } else if (res.cancel) {
            }
          },
        });
    },
    //加入圈子
    async JoinTeam(id,index){
      let _this = this
      if(this.user.IsAuth == 0){
           uni.showModal({
              title: "温馨提示",
              content: "您还未注册，请先注册",
              confirmText: "确定",
              success: function (res) {
                if (res.confirm) {
                  _this.nav_to("/pages/start/start2");
                } else if (res.cancel) {
                }
              },
            });
      }else{
        uni.showModal({
              title: "温馨提示",
              content: `您确定要加入该圈子吗？`,
              confirmText: "确定",
              success: async function (res) {
                if (res.confirm) {
                  let res1 = await _this.$api.post("Team/JoinTeam",{
                      ID:id
                  })
                  if(res1.data){
                    _this.$pv.msg(res1.message || '加入成功，请等待审核~');
                    // _this.teamlist[index].IsJoin = 1
                  }else{
                    _this.$pv.msg(res1.message);
                  }
                } else if (res.cancel) {
                }
              },
            }); 
      }
    },
    // 获取圈子列表
    async getteam() {
      let res = await this.$api.post("Team/MyTeam", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        TeamName: this.searchContent,
        LeaderID:this.user.UserID
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.isMore =
              Array.isArray(res.data) && res.data.length >= this.PageSize;
      }


    },
    // 获取一起挥列表
    async getActList() {
      let res = await this.$api.post("Appointment/PageList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        Appointment: '一起挥',
        User_Lng: this.longitude,
        User_Lat: this.latitude,
        Title:this.searchContent
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.isMore =
              Array.isArray(res.data) && res.data.length >= this.PageSize;
      }

    },
    //列表切换
    navswitch(index) {
      this.navindex = index
      this.PageIndex = 1
      this.teamlist  = []
      if (index == 0) {
        this.getActList()
      } else if (index == 1) {
        this.getteam()
      }
    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
    },
  },
}
</script>
<style lang='scss'>
page {
  background-color: #f6f6f6;
}

.actconBoxList {
  width: 100%;
  padding: 40rpx 20rpx;
  margin-top: 200rpx;
}

.cirlistbox{
  margin-top: 150rpx;
  padding-bottom: 40rpx;
}
.cirlist {
  width: 702rpx;
  // height: 548rpx;
  border-radius: 24rpx;
  padding: 36rpx 32rpx;
  // background-color: #9796ed;
  margin: 0 auto;
  margin-top: 24rpx;
  position: relative;
	.teamBox{
		position: absolute;
		top: 0;
		right: 0;
		padding: 8rpx 16rpx;
		color: #fff;
		background-color: #6C6AFF;
		font-size: 26rpx;
		border-radius: 0 24rpx;
		z-index: 9;
	}
  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 702rpx;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }

  .cirinfobox {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    position: relative;
    z-index: 10;

    .hdimg {
      width: 100rpx;
      height: 100rpx;
      border-radius:50%;
			box-sizing: border-box;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      width: 110rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
    .cirquit{
      width: 110rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;
      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }
      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .databox {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;

    .datatltie {
      margin-right: 56rpx;
      text-align: center;
      .datanum {
        font-size: 36rpx;
        font-weight: bold;
        color: #EFEFEF;
      }

      .datatext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
  }
}

.fix {
  position: fixed;
  background-color: #fff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
  padding-top: 20rpx;

  .endimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 1000;
    right: 150rpx;
    bottom: 28rpx;
  }

  .navbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;

    .navtext {
      width: calc(100% / 2);
      height: 100%;
      font-size: 28rpx;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

    }

    .text4 {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;

      .aft4 {
        width: 40rpx;
        height: 8rpx;
        background: #000000;
        border-radius: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.topBox {
  width: 100%;
  padding: 0 30rpx;
  padding-bottom: 25rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .topFastBtn {
    padding: 13rpx 24rpx;
    background: #000000;
    border-radius: 32rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 24rpx;
      height: 24rpx;
    }

    .topFastText {
      font-size: 24rpx;
      color: #ffffff;
    }

    .topFastNum {
      position: absolute;
      top: -16rpx;
      right: -10rpx;
      width: 40rpx;
      background-color: red;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      font-size: 20rpx;
    }
  }
}

.searchCell {
  width: 100%;
  display: flex;
  align-items: center;
  // margin-top: 20rpx;

  .scIcon {
    margin-right: 16rpx;
  }

  .scInp {
    width: 380rpx;
    //   background: #f2f2f2;
    border-radius: 100rpx;
    //   padding: 10rpx 30rpx;

    >input {
      width: 100%;
      background: transparent;
    }

  }
}

.topScreenBox {
  width: 100%;
  display: flex;
  align-items: center;

  .searchCell {
    width: 100%;
    height: 72rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #000000;
    border-radius: 36rpx;
    background-color: #f2f2f2;

    .scIcon {
      margin-right: 16rpx;
    }

    .searchimg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 24rpx;
    }

    .scInp {
      flex: 1;
      margin-left: 5rpx;

      >input {
        width: 100%;
        background: transparent;
      }

      .placname {
        color: #999999;
        font-size: 24rpx;
      }
    }

  }

  .scBtnBox {
    display: flex;
    // margin-left: auto;
    margin-right: 8rpx;

    .scSumBtn {
      // padding: 13rpx 34rpx;
      width: 136rpx;
      height: 64rpx;
      background: #000000;
      border-radius: 32rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #000000;
        background: white;
        color: #000000;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #000000;
        background: #000000;
        color: white;
      }
    }
  }
}
.btn_save {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;
		z-index: 98;
		.save_btn{
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #111;
		}
	}
</style>